<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-04-18 16:41:22
 * @Description  : 用于文件搜索的面板
-->

<template>
  <div>
    <n-form
      ref="formRef"
      :label-width="200"
      :label-placement="menuShow ? 'left' : 'top'"
      label-align="left"
      :model="searchInfo"
      size="small"
      require-mark-placement="left"
    >
      <n-form-item label="搜索范围：" path="range">
        <n-radio-group
          v-model:value="searchInfo.range"
          name="radiobuttongroup1"
        >
          <n-radio-button :value="0" :label="全部文件夹" />
          <n-radio-button :value="1" :label="当前文件夹" />
        </n-radio-group>
        <div class="ml-[12px] text-gray-400 text-[12px]">用于产品logo标题</div>
      </n-form-item>
      <n-form-item label="更多：" path="more">
        <n-checkbox v-model:checked="isContent"> 文件内容 </n-checkbox>
        <n-checkbox v-model:checked="isDeep"> 搜索子部门 </n-checkbox>
        <div class="ml-[12px] text-gray-400 text-[12px]">产品副标题</div>
      </n-form-item>
      <n-form-item label="文件类型：" path="type">
        <n-select
          v-model:value="searchInfo.type"
          :options="storageOriginArr"
          :render-label="renderLabel"
          class="!w-[300px]"
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          默认不显示的目录和文件,逗号隔开
        </div>
      </n-form-item>
      <n-form-item label="新用户默认创建目录：" path="newUserDefaultSources">
        <n-input
          class="!w-[300px]"
          :value="settings.newUserDefaultSources"
          @update:value="
            (value: string) => handleChange('newUserDefaultSources', value)
          "
          placeholder="请输入新用户默认创建目录"
          :allow-input="noSideSpace"
          clearable
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">用逗号隔开</div>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { VNodeChild } from 'vue'
import { handleNumberChange, renderDropLabel } from '@/utils/commonBusiness'
import type { IndexObj } from '@/types/commom'
import { noSideSpace } from '@/utils'
import { reactive } from 'vue'

const searchInfo = reactive({
  filename: '',
  range: 0,
  parentId: '',
  type: '',
  startTime: '',
  endTime: '',
  minSize: '',
  maxSize: '',
  userId: ''
})

const renderLabel = (option: IndexObj): VNodeChild => {
  return renderDropLabel(option.icon, option.label)
}
</script>

<style scoped lang="scss"></style>
